<template>
	<div>
		<div v-if="show" class="cus">
			<div class="cus_box" style="width:1200px;">
				<div class="title">
					<span>新增广告</span>
					<i @click="show = false" class="el-icon-close"></i>
				</div>

				<div class="mt10">
					<el-input style="width:120px;" placeholder="广告名称"></el-input>

					<el-button type="primary">搜索</el-button>
				</div>

				<div class="content">
					<el-table :data="tableData" height="500" border @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column prop="id" label="序号" width="180"></el-table-column>
						<el-table-column prop="name" label="广告名称" width="180"></el-table-column>
						<el-table-column prop="type" label="广告类型">
							<template slot-scope="scope">
								{{ scope.row['type'] == 1 ? '图片' : scope.row['type'] == 2 ? '视频' : '--' }}
							</template>
						</el-table-column>
						<el-table-column prop="url" label="广告内容">
							<template slot-scope="scope">
								<el-popover v-if="scope.row['url'].search(/.mp4/i) == -1" :placement="'right-start'" trigger="click">
									<div><el-image style="width: 300px;height: auto;" :src="scope.row['url'] | formatImg" fit="fill"></el-image></div>
									<el-image :style="'width: 80px;height: 80px;'" :src="scope.row['url'] | formatImg" fit="contain" slot="reference"></el-image>
								</el-popover>
								
								<el-popover v-if="scope.row['url'].search(/.mp4/i) != -1" :placement="'right'" trigger="click">
									<div>
										<p class="mb20">{{scope.row['name']}}</p>
										<video controls style="width:500px;height:auto;" :src="scope.row['url'] | formatImg"></video>
									</div>
									<el-button type="primary"  slot="reference">查看</el-button>
									<!-- <video controls style="width:100px;height:auto;" :src="scope.row['url'] | formatImg"  slot="reference"></video> -->
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column prop="place" label="播放屏"></el-table-column>
						<el-table-column prop="times" label="播放时长"></el-table-column>
						<!--            <el-table-column-->
						<!--              prop="address"-->
						<!--              label="播放次数">-->
						<!--            </el-table-column>-->
						<el-table-column prop="remarks" label="备注信息"></el-table-column>
						<el-table-column prop="ctime" label="创建时间"></el-table-column>
					</el-table>
				</div>

				<div class="btns mt20" style="text-align: center;">
					<el-button @click="show = false">取消</el-button>
					<el-button @click="submit" type="primary">确定</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Related_advertising',
	data() {
		return {
			show: false,

			tableData: [],

			data: [],

			row: {}
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData() {
			let res = await this.apis.advert_list({
				pageNum: 1,
				pageSize: 100000
			})
			const list = res.rows || []
			this.tableData = list
		},
		fun_show(row) {
			this.row = row
			this.show = true
			this.data = []
		},
		handleSelectionChange(val) {
			console.log(val)
			this.data = val
		},
		async submit() {
			if (this.data.length == 0) {
				this.$message({
					message: '请选择广告！',
					type: 'error'
				})
				return
			}

			let avIdList = []
			let avId = ''
			this.data.map(res => {
				avIdList.push(res.id)
			})

			avId = avIdList.join(',')

			const res = await this.apis.advertList_add({
				abId: this.row.id,
				avId: avId
			})

			this.$message({
				message: '操作成功！',
				type: 'success'
			})
			this.show = false
			this.$emit('add_call')
		}
	}
}
</script>

<style scoped lang="scss"></style>
